// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

import TrendBaseComponent from "./TrendBaseComponent";

const {ccclass, property} = cc._decorator;

@ccclass
export default class RankTrendComponent extends TrendBaseComponent {

    @property(cc.Prefab)
    rankPrefab: cc.Prefab = null;
    
    @property(cc.Label)
    startLabel: cc.Label = null;
    
    @property(cc.Label)
    totalLabel: cc.Label = null;

    @property(cc.Graphics)
    graphic: cc.Graphics = null;

    _itemArray: any = [];

    _garphicArray: any = [];

    clearData () {
        this.graphic.clear();
        for (let index = 0; index < this._garphicArray.length; index++) {
            const item = this._garphicArray[index];
            item.opacity = 0;
        }
    }

    setData (rankData, nodeWidth) {
        this.clearData();
        this.totalLabel.string = rankData.maxRank;
        let list: any = rankData.list;
    
        let totalHeight = this.node.height - 60;

        let maxLow = 1;
        let maxHigh = rankData.maxRank;
        if (rankData.maxLow) {
            maxLow = rankData.maxLow;
        }
        let cell = 1;
        let gridCount = 4;
        let inv = Math.ceil((maxHigh - maxLow) / cell / gridCount) * cell * gridCount;
        let newCell = inv / gridCount;

        let rate = totalHeight / (maxHigh - maxLow);
        let grids = [maxHigh, maxLow + 3 * newCell, maxLow + 2 * newCell, maxLow + newCell, maxLow];
        this.setGirdData(grids, maxHigh, rate, true);
        
        let averArray = [];
        for (let index = 0; index < list.length; index++) {
            const item = list[index];
            let x = nodeWidth * index + nodeWidth;
            let y = totalHeight * (1 - item.rank / rankData.maxRank) + 30;
            if (index == 0) {
                this.graphic.moveTo(x, y);
            } else {
                this.graphic.lineTo(x, y);
            }
            averArray.push(Math.pow(maxHigh - item.rank + 1, 1.2));
            let rankItem = this._garphicArray[index];
            if (rankItem == null) {
                rankItem = cc.instantiate(this.rankPrefab);
                this.graphic.node.addChild(rankItem);
                this._garphicArray[index] = rankItem;
            }
            rankItem.opacity = 255;
            rankItem.x = x;
            rankItem.y = y;
            rankItem.getComponent(cc.Label).string = item.rank + '';
            this._compareRank(list[index - 1], list[index + 1], item, rankItem);
            if (item.change >= 0) {
                rankItem.color = cc.color(255,0,0);
                
            } else {
                rankItem.color = cc.color(0,180,0);
            }
        }
        this.graphic.stroke();
        let powRate = totalHeight / Math.pow(maxHigh, 1.2);
        this.drawAverage(averArray, maxLow, powRate, nodeWidth);
    }

    setEmoteData (rankData, nodeWidth) {
        this.clearData();
        this.totalLabel.string = rankData.maxRank;
        let list: any = rankData.list;
    
        let totalHeight = this.node.height - 60;

        let maxLow = 1;
        let maxHigh = rankData.maxRank;
        if (rankData.maxLow) {
            maxLow = rankData.maxLow;
        }
        let cell = 1;
        let gridCount = 4;
        let inv = Math.ceil((maxHigh - maxLow) / cell / gridCount) * cell * gridCount;
        let newCell = inv / gridCount;

        let invNum = maxHigh - maxLow;

        let rate = totalHeight / (maxHigh - maxLow);
        let grids = [maxLow, maxLow + newCell, maxLow + 3 * newCell, maxLow + 2 * newCell, maxHigh];
        this.setGirdData(grids, maxLow, rate);
        
        let averArray = [];
        for (let index = 0; index < list.length; index++) {
            const item = list[index];
            let x = nodeWidth * index + nodeWidth;
            let y = totalHeight * ((item.rank - rankData.maxLow) / invNum) + 30;
            if (index == 0) {
                this.graphic.moveTo(x, y);
            } else {
                this.graphic.lineTo(x, y);
            }
            averArray.push(item.rank - maxLow);
            let rankItem = this._garphicArray[index];
            if (rankItem == null) {
                rankItem = cc.instantiate(this.rankPrefab);
                this.graphic.node.addChild(rankItem);
                this._garphicArray[index] = rankItem;
            }
            rankItem.opacity = 255;
            rankItem.x = x;
            rankItem.y = y;
            if (item.rank > 30) {
                rankItem.color = cc.color(180, 0, 0);
            } else {
                rankItem.color = cc.color(0, 180, 0);
            }
         
            rankItem.getComponent(cc.Label).string = item.rank + '';
            this._compareEmote(list[index - 1], list[index + 1], item, rankItem);
        }
        this.graphic.stroke();
        let powRate = totalHeight / (maxHigh - maxLow);
        this.drawAverage(averArray, 0, powRate, nodeWidth);
    }

    _compareEmote (preData, nextData, data, node) {
        let pre = preData == null ? 0 : data.rank - preData.rank;
        let next = nextData == null ? 0 : data.rank - nextData.rank;
        if ((pre <= 0 && next <= 0) ) {
            node.y -= 20;
        } else if (pre >= 0 && next >= 0) {
            node.y += 20;
        } else if (pre < 0 && Math.abs(pre) > next) {
            node.y -= 20;
        } else if (pre > 0 && Math.abs(next) > pre) {
            node.y -= 20;
        } else {
            node.y += 20;
        }
    }

    _compareRank (preData, nextData, data, node) {
        let pre = preData == null ? 0 : data.rank - preData.rank;
        let next = nextData == null ? 0 : data.rank - nextData.rank;
        if ((pre <= 0 && next <= 0) ) {
            node.y += 20;
        } else if (pre >= 0 && next >= 0) {
            node.y -= 20;
        } else if (pre < 0 && Math.abs(pre) > next) {
            node.y += 20;
        } else if (pre > 0 && Math.abs(next) > pre) {
            node.y += 20;
        } else {
            node.y -= 20;
        }
    }
}
